<template>
  <!-- 中间表单内容 -->
  <el-form
    class="pcForm"
    :ref="formConf.formRef"
    :size="formConf.size"
    :model="formModel"
    :label-position="formConf.labelPosition"
    :disabled="formConf.disabled"
    :label-width="formConf.labelWidth + 'px'"
  >
    <form-row-container
      :list.sync="list"
      :formConf="formConf"
      :isEdit="false"
      enabled
      :isPreview="isPreview"
      :onlyShow="onlyShow"
      @validate="validateItem"
    />
    <!-- <el-form-item v-if="formConf.formBtns">
      <el-button type="primary" @click="validateForm(() => {})">提交</el-button>
      <el-button @click="resetForm()">重置</el-button>
    </el-form-item>-->
  </el-form>
</template>

<script>
import { deepClone, toCamelCase, traverseTree } from "../utils/index";
import * as formEvent from "@/components/formGenerator/utils/formEvent"
import emitter from '@/utils/eventBus';

export default {
  name: "pcForm",
  props: {
    formList: {
      type: Array,
      default: () => [],
    },
    formConf: {
      type: Object,
      default: () => {},
    },
    onlyShow: {
      type: Boolean,
      default: false,
    },
    isPreview: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formModel: {},
      formArray: [],
      list: [],
    };
  },

  watch: {
    formList: {
      immediate: true,
      deep: true,
      handler(newValue) {
        if (newValue) {
          this.list = deepClone(newValue);
        }
      },
    },
    list: {
      immediate: true,
      deep: true,
      handler(newValue) {
        if (newValue) {
          // 将表单列表数据存储
          formEvent.setForm(newValue);
          // 根据表单列表生成动态表单模型数据
          this.formArray = [];
          this.getFormModel(newValue);
        }
      },
    },
  },
  computed: {},
  mounted() {
    emitter.on('verify', (item) => {
      console.log("aaaddverify", item);
      this.validateItem(item)
    });
  },
  beforeDestroy() {
    emitter.off('verify');
  },
  methods: {
    toCamelCase,
    // 根据表单列表生成动态表单模型数据
    getFormModel(list) {
      list.forEach((el) => {
        if (el?.__vModel__ && el.__config__) {
          let obj = JSON.parse(JSON.stringify(this.formModel));
          this.formModel = Object.assign(obj, {
            [el.__vModel__]: el.__config__.defaultValue,
          });
          this.formArray.push({
            fieldId: el.__vModel__,
            fieldKey: el.__config__.formKey,
            label: el.__config__.label,
            tag: el.__config__.tag,
            defaultValue: el.__config__.defaultValue,
            dataObj: el.dataObj,
            type: typeof el.__config__.defaultValue,
            formCode: this.formConf.formCode,
          });
        }
        if (el?.children) {
          this.getFormModel(el.children);
        }
      });
    },
    submitForm(cb) {
      this.$emit("update:formList", this.list);
      this.$emit("submit", this.list);
      cb(this.formArray, deepClone(this.list));
    },
    validateForm(cb) {
      this.$emit("update:formList", this.list);
      this.$refs[this.formConf.formRef].validate((valid) => {
        this.$emit("submit", this.list);
        // 可以从外部传递方法
        cb(valid, this.formArray, deepClone(this.list));
      });
    },
    // 重置
    resetForm() {
      this.$refs[this.formConf.formRef].resetFields();
      traverseTree(this.list, (node) => {
        if (node.__config__ && node.disabled !== true && node.readonly !== true)
          node.__config__.defaultValue = null;
      }); // 从根节点开始遍历整个树
      this.$emit("update:formList", this.list);
    },
    // 单独校验某一个组件
    validateItem(item) {
      this.$nextTick(() => {
        // 此处是为了解决级联组件只校验上一次结果，不校验当前结果的bug
        if (this.$refs[this.formConf.formRef]) {
          this.$refs[this.formConf.formRef].validateField([item.__vModel__]);
        }
      });
    },
  },
};
</script>

<style lang="scss">
</style>
